<template>
	<view class="u-p-5">
		<view class="" v-html="content"></view>
		<view class="u-flex u-flex-wrap u-row-between u-p-15">
			<view class="u-m-b-20" style="width: 49%;" v-for="(item,index) in goodsList" :key="index">
				<u-image width="100%" height="200rpx" :show-loading='false' :src="item.src"
					@click="$u.route('/pages/shop/detail/detail',{id:item.id})"></u-image>
				<view class="u-text-center u-p-t-15 u-p-b-15 u-m-t-10 u-font-22" style="background-color: #979595;">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTopic
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	export default {
		data() {
			return {
				content: '',
				goodsList: []
			}
		},
		onLoad(e) {
			this.getTopic(e.id)
		},
		methods: {
			getTopic(id) {
				getTopic(id).then(res => {
					this.content = res.article.content.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;"');
					this.goodsList = res.goodsList.map(item => {
						return {
							src: $shopImgUrl + item.pic,
							...item
						}
					})
					uni.setNavigationBarTitle({
						title: res.article.title
					})
				})
			}
		}
	}
</script>

<style>

</style>
